<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>推荐页</title>
    <style>
        div {
            border: 2px solid #bbbbbb;
            margin: 1px;
        }
        
        div#main {
            height: 800px;
            border: none;
            margin-top: 40px;
        }
        
        div#main>div {
            /* display: inline-block; */
            float: left;
            height: 100%;
        }
        
        div#main>div#right-side {
            float: right;
        }
        
        div#content {
            margin-left: 50px;
            border: none;
        }
        
        div#content>div {
            /* width: 700px; */
            padding: 10px 20px;
            border: #999999 1px solid;
        }
        
        div#left-side,
        div#right-side {
            width: 250px;
            padding-right: 10px;
            box-sizing: border-box;
        }
        
        div#left-side ul {
            padding-left: 20px;
            font-size: 15px;
            color: rgb(116, 116, 116);
        }
        
        div#left-side h4 {
            padding-left: 5px;
        }
        
        .poi-info {
            border-bottom: coral 1px dashed;
            margin-top: 10px;
            padding-bottom: 10px;
        }
        
        .poi-info>div {
            display: inline-block;
            vertical-align: bottom;
        }
        
        .poi-info #des {
            width: 500px;
            overflow: hidden;
            padding: 5px;
            box-sizing: border-box;
            border: none;
        }
        
        .poi-info>div h4 span {
            color: coral;
        }
        
        #content ul {
            list-style-type: none;
            padding-left: 0;
        }
        
        .poi-info img {
            width: 140px;
            height: 140px;
        }
    </style>
</head>

<body>
    <%- include ('header.ejs') %>
        <div id="main">
            <%- include ('left-side.ejs')%>
                <div id="content">
                    <div id="hot-recom">
                        <h3 class="recom">专属推荐</h3>
                        <ul>
                            <% jsonPois.forEach(function(poi){%>
                                <li class="poi-info">

                                    <div>
                                        <a href="/poi">
                                            <img src="https://img.meituan.net/msmerchant/93289b21422cfdd02c68a6757cc47db1604458.jpg" alt="img">
                                        </a>
                                    </div>
                                    <div id="des">
                                        <h4>
                                            <%=poi.title%>
                                                <span>  star:<%=poi.avgScore%></span>
                                        </h4>
                                        <span><%=poi.allCommentNum%> 人消费</span>
                                        <span>人均消费:<%=poi.avgPrice%></span>
                                        <p>地址：
                                            <%=poi.address%>
                                        </p>
                                    </div>
                                </li>
                                <% }) %>
                        </ul>
                    </div>
                    <div id="tag-recom">
                        <h3 class="recom">专属推荐</h3>
                        <ul>
                            <li class="poi-info"></li>
                        </ul>
                    </div>
                    <div id="sim-recom">
                        <h3 class="recom">大家在看</h3>
                        <ul>
                            <li class="poi-info"></li>
                        </ul>
                    </div>
                </div>
                <div id="right-side"></div>
        </div>
        <%- include ('footer.ejs')  %>

</body>

</html>